<template>
  <div class="">
    <el-dialog @close="close" width="400px" :title="title" append-to-body :visible.sync="dialogVisible">
      <ex_super_form
        ref="form"
        v-bind="option"
        label-width="80px"
      >
      </ex_super_form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$tt('label_cancel')}}</el-button>
        <el-button type="primary" @click="submit">{{$tt('label_confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components:{

  },
  props:{
  },
  data () {
    return {
      title: '',
      name: '',
      keyStr: '',
      dialogVisible: false,
    }
  },
  watch: {
  },
  computed: {
    option() {
      return {
        model: [
          {
            grid: [
              [
                {
                  col: {
                    key: 'value',
                    label: this.name,
                    attrs: {
                      type: 'number'
                    }
                  },
                }
              ],
            ]
          }
        ],
      }
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    show({title, name, key}) {
      this.title = title
      this.name = name
      this.keyStr = key
      this.dialogVisible = true
    },
    close() {
      this.$refs.form.resetFields()
      // this.$refs.form.clearValidate()
      this.$emit('close')
    },
    submit() {
      const obj = this.$refs.form.getFormData()
      if (!obj.value) return this.$message.error(this.$tt("tip_can_no_empty"))
      if (obj.value <= 0) return this.$message.error(this.$tt("tip_only_positive_number"))
      this.$emit('submit', {...obj, type: this.keyStr})
      this.dialogVisible = false
    },

  },
  destroyed () {

  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  padding: 0 20px;
}
</style>
